{% assign blockId = block_id | default : section.block_id %}
<div id="block_high_search{{block_id}}" class="block_high_search df-relative {% unless section.settings.is_fill %}block_high_search_wrapper{% endunless %}">

  {%- if section.settings.bg_image.src != "" -%}
  <img data-crop-type="height" style="height:{{section.settings.height}}" class="df-w-full df-object-cover" data-src="{{ section.settings.bg_image.src }}" src="{{ 'banner_loading.png' | public_asset_abs_url }}" alt="{{ section.settings.bg_image.alt }}">
  {%- else -%}
  <img data-crop-type="height" style="height:{{section.settings.height}}" class="df-w-full df-object-cover" src="{{ 'banner@2x.png' | public_asset_abs_url }}" alt="">
  {%- endif -%}

  <div class="df-absolute df-top-0 left-0 bg-black df-w-full df-h-full" style="opacity: {{ section.settings.mask_transparent | divided_by : 100  }};"></div>
  <div class="df-absolute df-top-0 df-left-0 df-w-full df-h-full">
    <div class="container_wrapper df-h-full  df-flex df-justify-center df-items-center">
      <div class="df-p-6 df-w-full md:df-w-5/12 df-flex df-flex-col df-items-center">
        {% if section.settings.title != '' %}
          <h2 class="df-mb-2 df-text-white">{{section.settings.title}}</h2>
        {% endif %}
        {% if section.settings.detail != '' %}
          <div class="df-mb-10 df-text-white">{{section.settings.detail}}</div>
        {% endif %}
        <div class="df-w-full df-relative">
          <div class="df-flex df-items-center df-bg-white df-p-2 df-flex-col md:df-flex-row" id="highSerach{{block_id}}">
            <input type="text" class="df-h-12 df-w-full md:df-flex-1 df-px-3 df-box-border" id="high-search-val-{{block_id}}" placeholder="{{section.settings.placeholder}}">
            <div class="df-flex df-justify-center df-items-center  df-px-8 md:df-px-12  df-h-12 btn-high_search df-cursor-pointer df-w-full md:df-w-auto df-box-border submit" id="block_high_search_submit_{{block_id}}">
              <span class="text-sm">{{lang.general.searchword}}</span>
            </div>
          </div>
          <div class="df-absolute df-left-0 df-right-0 df-top-32 md:df-top-20 block_high_search-absolute df-hidden">
            <div class="df-py-5 md:df-py-8 df-flex df-items-center df-overflow-hidden">
              <div class="df-flex df-items-center df-justify-center df-opacity-0 md:df-px-3  md:df-visible df-invisible" id="block_prev_{{ block_id  }}">{% include 'icon_silde_left' ,width:'20',height:'20' %}</div>
              <div class="high_search-swiper-{{block_id}} df-flex-1 df-overflow-hidden df-flex-shrink-0">
                <div class="swiper-wrapper df-flex df-justify-center" id="high_search-wrapper-{{block_id}}"></div>
              </div>
              <div class="df-flex df-items-center df-justify-center df-opacity-0 md:df-px-3 md:df-visible df-invisible" id="block_next_{{ block_id  }}">{% include 'icon_silde_right' ,width:'20',height:'20' %}</div>
            </div>
            <div class="block_high_search-body">
              <div class="product-box df-hidden"></div>
              <div class="collection-box df-hidden"></div>
              <div class="page-box df-hidden"></div>
              <div class="post-box df-hidden"></div>
              <div class="topic-box df-hidden"></div>
              <div class="promotion-box df-hidden"></div>
              <div class="coupon-box df-hidden"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'block_high_search_temp' %}
<script>
  $(function() {
    var block_id = "{{block_id}}";
    var search_types_str = "{{section.settings.search_types | join: ','}}";
    var search_types = {{section.settings.search_types|json}};
    if (search_types.length) {
      var sortTypeHtml = search_types.sort((star, next) => {
        var order = [
          "product",
          "collection",
          "topic",
          "post",
          "page",
          "promotion",
          "coupon"
        ];
        return order.indexOf(star) - order.indexOf(next)
      }).map(function(item) {
        switch (item) {
          case "product":
            return '<div class="swiper-slide tab-item" type="product-box"> ' + lang.collections.detail.products + '</div>';
          case "collection":
            return '<div class="swiper-slide tab-item" type="collection-box"> ' + lang.collections.list.collections + '</div>';
          case "topic":
            return '<div class="swiper-slide tab-item" type="topic-box"> ' + lang.general.topics + '</div>';
          case "post":
            return '<div class="swiper-slide tab-item" type="post-box"> ' + lang.general.blogs + '</div>';
          case "page":
            return '<div class="swiper-slide tab-item" type="page-box"> ' + lang.general.page + '</div>';
          case "promotion":
            return '<div class="swiper-slide tab-item" type="promotion-box"> ' + lang.promotions.title + '</div>'
          case "coupon":
            return '<div class="swiper-slide tab-item" type="coupon-box"> ' + lang.coupons.title + '</div>'
        }
      }).join("");
      $("#high_search-wrapper-" + block_id).html(sortTypeHtml || '<div class="swiper-slide tab-item" type="product-box"> ' + lang.collections.detail.products + '</div>')
    } else {
      $("#high_search-wrapper-" + block_id).html('<div class="swiper-slide tab-item" type="product-box"> ' + lang.collections.detail.products + '</div>')
    }
    var highSerach = $("#block_high_search" + block_id);
    var load = null;
    function pushRouter() {
      search("#high-search-val-" + block_id);
    }
    var oldVal = "";
    function renderSearchModel(val) {
      if (search_types.length == 0) {
        return false
      }
      if (val === oldVal) {
        highSerach.find(".block_high_search-absolute").show();
        return false
      }
      if (val) {
        oldVal = val;
        if (load === null) {
          load = moi.nodeShowLoading("#block_high_search_submit_" + block_id);
        }
        moi.ajax({
          type: "get",
          url: "/searchbox",
          data: {
            q: val,
            type: search_types_str || "product",
            page: 1,
            pagesize: 100
          },
          complete: function() {
            if (load) {
              load.close();
              load = null;
            }
          },
          success: function(res) {
            if (res.data) {
              var retData = res.data;
              var keys = Object.keys(retData);
              keys.forEach(function(key) {
                if (retData[key].list.length) {
                  engine.parseAndRender($("." + key + "-box-temp").eq(0).html(), {
                    data: retData[key].list,
                    data_from:"{{data_from}}",
                    lang: lang
                  }).then(function(liquidHtml) {
                    highSerach.find("." + key + "-box").html(liquidHtml)
                    {% comment %} window.addLazyImages && addLazyImages(highSerach.find("." + key + "-box").find("img[data-src]")); {% endcomment %}
                  });
                } else {
                  var html = ""
                  switch (key) {
                    case "topic": html = `{% include "empty" , text:lang.general.no_topic %}`;
                      break;
                    case "post": html = `{% include "empty" , text:lang.blogs.list.empty %}`;
                      break;
                    case "collection": html = `{% include "empty" , text:lang.general.no_collections %}`;
                      break;
                    case "page": html = `{% include "empty" , text:lang.general.no_page %}`;
                      break;
                    case 'promotion': html = `{% include "empty" , text:lang.promotions.no_promotion %}`;
                      break;
                    case 'coupon': html = `{% include "empty" , text:lang.coupons.no_coupon %}`;
                      break;
                    default: html = `{% include "empty" , text:lang.general.empty %}`;
                      break;
                  }
                  highSerach.find("." + key + "-box").html(html)
                }
              })
              
              highSerach.find(".block_high_search-absolute").show();
              highSerach.find(".tab-item").eq(0).addClass("tab-item-active").siblings().removeClass("tab-item-active");
              highSerach.find(".product-box").show().siblings().hide();
              var mySwiperSmall = new Swiper(".high_search-swiper-" + block_id, {
                slidesPerView: 'auto',
                spaceBetween: 0,
                navigation: {
                  nextEl: "#block_next_" + block_id,
                  prevEl: "#block_prev_" + block_id
                },
                on: {
                  init: function(swiper) {
                    if (this.virtualSize > this.width) {
                      $("#high_search-wrapper-" + block_id).css({justifyContent: "start"});
                      $("#block_next_" + block_id).css({opacity: "1"});
                      $("#block_prev_" + block_id).css({opacity: "1"});
                    }
                  }
                }
              })
            }
          }
        })
      }
    }
    highSerach.find(".submit").click(function(e) {
      e.stopPropagation();
      pushRouter();
    });
    highSerach.find("input").keypress(function(e) {
      e.stopPropagation();
      if (e.keyCode == "13") {
        pushRouter()
      }
    });
    highSerach.find("input").keyup(function(e) {
      e.stopPropagation();
      var val = $.trim($(this).val());
      if (val) {
        renderSearchModel(val)
      } else {
        highSerach.find(".block_high_search-absolute").hide();
      }
    });
    highSerach.find("input").focus(function(e) {
      e.stopPropagation();
      var val = $.trim($(this).val());
      if (val) {
        renderSearchModel(val)
      } else {
        highSerach.find(".block_high_search-absolute").hide();
      }
    });
    highSerach.find("input").click(function(e) {
      e.stopPropagation();
    });
    highSerach.find(".tab-item").click(function(e) {
      e.stopPropagation();
      const type = $(this).attr("type");
      $(this).addClass("tab-item-active").siblings().removeClass("tab-item-active");
      highSerach.find("." + type).show().siblings().hide()
      if(type == 'coupon-box') {
        highSerach.find('.block_high_search-body .coupon-box .code').on('click', function (e) {
          e.preventDefault()
          let textToCopy = $(this).attr('data-clipboard-text')
          let item = new ClipboardItem({ 'text/plain': new Blob([textToCopy], { type: 'text/plain' }) })
          navigator.clipboard
            .write([item])
            .then(function () {
              moi.alertInfo({ content: lang.coupon.copy_success, type: 'success' })
            })
            .catch(function (err) {
              console.log(err)
            })
        })
      }
    });
    highSerach.find(".block_high_search-absolute").click(function(e) {
      e.stopPropagation();
    });
    $(document).click(function() {
      if (highSerach.find(".block_high_search-absolute").is(':visible')) {
        highSerach.find(".block_high_search-absolute").hide();
      }
    });
  })
</script>
{% schema %}
{
	"tag": "section",
	"class": "block_high_search",
	"icon": "icon-Hight_search",
	"is_global": false,
	"name": {
		"zh_CN": "高级搜索",
		"en_US": "Advance search"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill",
			"default": false
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "title"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": ""
		},
		{
			"type": "card_input",
			"id": "placeholder",
			"label": {
				"zh_CN": "底纹文字",
				"en_US": "Text background"
			},
			"placeholder": {
				"zh_CN": "请输入搜索底纹",
				"en_US": "Please enter a search background"
			},
			"default": "search"
		},
		{
			"type": "card_select",
			"id": "search_types",
			"option": [
				{
					"label": {
						"zh_CN": "商品",
						"en_US": "Product"
					},
					"value": "product"
				},
				{
					"label": {
						"zh_CN": "专辑",
						"en_US": "Collection"
					},
					"value": "collection"
				},
				{
					"label": {
						"zh_CN": "专题",
						"en_US": "Topic list"
					},
					"value": "topic"
				},
				{
					"label": {
						"zh_CN": "博客",
						"en_US": "Blog"
					},
					"value": "post"
				},
				{
					"label": {
						"zh_CN": "条款",
						"en_US": "Terms"
					},
					"value": "page"
				},
        {
					"label": {
						"zh_CN": "满减活动",
						"en_US": "promotions"
					},
					"value": "promotion"
				},
        {
					"label": {
						"zh_CN": "优惠码",
						"en_US": "coupons"
					},
					"value": "coupon"
				}
			],
			"label": {
				"zh_CN": "搜索字段",
				"en_US": "Search field"
			},
			"default": []
		},
		{
			"type": "card_select",
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "60vh"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "50vh"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "40vh"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			],
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			},
			"default": "middle"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "背景图片",
				"en_US": "Background image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
				"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
			},
			"id": "bg_image"
		},
		{
			"type": "card_slider",
			"id": "mask_transparent",
			"max": "100",
			"min": "1",
			"label": {
				"zh_CN": "蒙层不透明度",
				"en_US": "Mask opacity"
			},
			"default": "40"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Quick Search",
			"placeholder": "Search",
			"search_types": [
				"product",
				"collection",
				"topic",
				"post",
				"page"
			],
			"height": "50vh",
			"bg_image": {
				"src": "https://cn01-cdn.staticsyy.com/uploads/24923/cart/resources/20221209/b59abb102a9def4fc6def8827def89b9.png",
				"alt": ""
			},
			"mask_transparent": "20",
			"is_fill": true,
			"detail": "Find Your Favorite"
		},
		"blocks": []
	}
}
{% endschema %}